<template>
  <div class="originalfile">
    <el-form ref="menuRef" :model="form" :rules="rules" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人" prop="linkName">
            <el-input v-model.trim="form.linkName" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="linkPhone">
            <el-input v-model.trim="form.linkPhone" placeholder="请输入联系方式" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题描述" prop="problemDescription">
            <el-input
              type="textarea"
              :maxlength="200"
              v-model.trim="form.problemDescription"
              show-word-limit
              placeholder="请输入问题描述"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" @click="submitForm" :loading="loadingParams.submitLoading">
      <template #loading>
        <div class="custom-loading">
          <svg class="circular" viewBox="-10, -10, 50, 50">
            <path
              class="path"
              d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
              style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
            />
          </svg>
        </div>
      </template>
      提交</el-button
    >

    <el-upload
      class="upload-demo"
      action="#"
      multiple
      :on-change="handleCoverChange"
      :auto-upload="false"
      :show-file-list="false"
    >
      <el-button type="primary" :loading="loadingParams.textLoading">
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path
                class="path"
                d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
              />
            </svg>
          </div>
        </template>
        <span>解析录音</span>
      </el-button>
    </el-upload>
  </div>
</template>

<script setup lang="ts">
import { addProblemAPI, asrAPI, ttsAPI, fileUploadAPI } from '@/api/home.js'
import { defineOptions, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.js'
import { formatFileSize } from '@/utils/index.js'
import { ElMessageBox } from 'element-plus'
const { proxy } = getCurrentInstance()
const authStore = useAuthStore()
const router = useRouter()
const form = ref<any>({})
const loadingParams = reactive({
  submitLoading: false,
  voiceLoading: false,
  textLoading: false,
})
const rules = ref({
  linkName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' },
  ],
  problemDescription: [
    { required: true, message: '请输入问题描述', trigger: 'blur' },
    { min: 1, max: 200, message: '问题描述长度必须介于 1 和 200 之间', trigger: 'blur' },
  ],
  linkPhone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系方式', trigger: 'blur' },
  ],
})

const submitForm = () => {
  proxy.$refs['menuRef'].validate((valid) => {
    if (valid) {
      loadingParams.submitLoading = true
      addProblemAPI({ ...form.value, submitMethod: 1, status: 1 })
        .then((res) => {
          console.log(res, 'resresresr')
          if (res.code === 200) {
            loadingParams.submitLoading = false
            router.push({ path: '/admin/rulebase' })
          }
        })
        .catch((err) => {
          loadingParams.submitLoading = false
        })
    }
  })
}

async function handleCoverChange({ raw: file }) {
  let formData = new FormData()
  console.log(file, 'filefilefilefilefile')

  formData.append('file', file)
  loadingParams.textLoading = true

  fileUploadAPI(authStore.userInfo.id, formData)
    .then((res) => {
      console.log(res)
      asrAPI({
        filePath: res.data.fileUrl,
        fileName: res.data.fileName,
      })
        .then((res1) => {
          console.log(res1)
          loadingParams.textLoading = false
          form.value.problemDescription = res1
        })
        .catch((err) => {
          loadingParams.textLoading = false
        })
    })
    .catch((err) => {
      loadingParams.textLoading = false
    })
}

onMounted(() => {})
defineOptions({
  name: 'originalfile',
})
</script>

<style lang="scss" scoped>
.originalfile {
  height: 100%;
  .text_style {
    padding: 12px;
    border-radius: 13px;
    background: #f4f4f4;
    margin: 15px 0;
  }
  .upload-demo {
    display: inline-block;
    margin-left: 15px;
    vertical-align: bottom;
  }
}
.custom-loading {
  display: inline-block;
  .circular {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    animation: loading-rotate 2s linear infinite;
    .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: var(--el-button-text-color);
      stroke-linecap: round;
    }
  }
}
</style>
